<template>
<view class="page"> 
	<view class="body"> 
		<!-- 绑定微信 -->
		<template v-if="type=='bind'">
			<view class="form-wrap">
				<view class="bind-icon-bar">
					<view class="icon wx-icon"><image src="@/static/images/icon.png" mode="widthFix"></image></view>
					<view class="icon bind-icon"><image src="@/static/images/bind_icon.png" mode="widthFix"></image></view>
					<view class="icon login-icon"><image src="@/static/images/wechat.png" mode="widthFix"></image></view>
				</view>
				<view class="phone-login">
					<!-- <view class="account-phone">
						<text class="label">绑定账号：</text>
						<text class="phone">{{replacePhone}}</text>
					</view> -->
					<view class="item"> 
						<input type="number" v-model="phone" maxlength="11" :focus="phoneFocus" class="phone-inp" placeholder="请输入手机号" />
						<view v-if="phone" class="iconfont f-s28" @click="clearPhone">&#xe8bb;</view>
					</view>
					<view class="item">  
						<input type="number" v-model="phone_code" :focus="codeFocus" class="code-inp" placeholder="请输入验证码" />
						<view class="get-code" @click="sendSms">{{count_time_text}}</view> 
					</view>
					<view class="login-btn active" @click="bindPhone">立即绑定</view> 
					<view class="hr-line">或者</view>  
					<button open-type="getPhoneNumber" class="bind-wx-phone" @getphonenumber="GetPhoneNumber">快速绑定微信手机号</button>
				</view>				 
			</view>
		</template>
		
		<!-- 解除绑定微信 -->
		<template v-if="type=='upbind'">
			<view class="form-wrap">
				<view class="bind-icon-bar">
					<view class="icon wx-icon"><image src="@/static/images/icon.png" mode="widthFix"></image></view>
					<view class="icon bind-icon"><image src="@/static/images/upbind.png" mode="widthFix"></image></view>
					<view class="icon login-icon"><image src="@/static/images/wechat.png" mode="widthFix"></image></view>
				</view>
				<view class="phone-login"> 
					<view class="login-btn active" @click="upBindWechat">解除绑定并退出</view>  
				</view>				 
			</view>
		</template>
		
	</view> 
</view>
</template>

<script>
import {checkPhone,getCurrenPage,replaceStr} from '@/common/util.js'
import {getUserInfo} from '@/common/login.js'
import Timer from '@/common/timer.js'
import {
		HTTP_REQUEST_URL
	} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			type:'',
			replacePhone:'',
			phone:'',
			phone_code:'', 
			phone_code_type: '6', // 0/空 密码登录   1 找回密码  2 重置密码  3 登录  4 登录/注册  6 绑定手机号
			isSentCode:true,
			backType:'',                          // next : 下一级页面  prev : 返回上级页面
			backurl:'',
			jsCode:'',
			openId:'',
			wm_id:'',
			invite_code:'',
			count_time_text:'获取验证码',
			isStop:true,
			phoneFocus:false,
			codeFocus:false,
			isSendCode:false,
			isStopBind:true,
			isStopGetCode:true,
			timer:null,
		}
	},
	onShow() {
		
	},
	onLoad(params) {
		console.log(123,params)
		this.backType=params.backType;
		this.backurl=params.backurl;
		this.openId=params.openid; 
		this.type=params.type;
		// this.replacePhone=replaceStr(this.userInfo.phone,3,'****'); 
		if(this.type=='bind'){
			uni.setNavigationBarTitle({
				title:'绑定账号'
			})
		}else if(this.type=='upbind'){
			uni.setNavigationBarTitle({
				title:'解除微信绑定'
			})
		}
		
	},
	methods:{
		
		
		//发送验证码
		sendSms: async function() { 
			console.log(12)
			// 1 找回密码  2 重置密码  3 手机登录  空/0 密码登录 4 登录注册 6 绑定手机号
			let _this = this;
			this.phone_code = ""; 
		
			if(this.phone_code_type==6){ 
				if (this.phone == '') {
					uni.showToast({
						icon: "none",
						title: "请输入手机号",
						mask: true
					})
					return
				}
				if (!checkPhone(this.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确手机号",
						mask: true
					})
					return
				}
				if (this.isSentCode) {
					this.isSentCode = false;
					uni.request({
						url: HTTP_REQUEST_URL + '/user/sendsms',
						method: 'POST',
						data: {
							tel: _this.phone,
							type: _this.phone_code_type
						},
						dataType: 'json',
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
							"Cookie": uni.getStorageSync('cookiekey')
						},
						success: (res) => { 
							console.log(res)
							if (res.data.ret == 0) {
								uni.hideLoading();
								uni.showToast({
									icon: "success",
									title: "验证码发送成功",
									mask: true
								})
								this.timer = new Timer({
									type: '1',
									num: 60
								});
				
								this.timer.start({
									success: function(res) {
										_this.count_time_text = res + 's';
									},
									complate: function() {
										_this.count_time_text = '获取验证码';
										setTimeout(() => {
											_this.isSentCode = true;
										}, 300)
									}
								}) 
							} else {
								uni.showToast({
									icon: "none",
									image: "../../static/images/error.png",
									title: res.data.message,
									mask: true
								})
								setTimeout(() => {
									_this.count_time_text = '获取验证码';
									_this.isSentCode = true;
								}, 300)
							}
						},
						fail: (err) => {
				
						}
					})					 
				
				}
			}
		
		}, 
		
		// 绑定其他手机号
		bindPhone: async function() {
			let _this = this; 
		
			if (this.phone_code_type == 6) { 
				if (this.phone == '') {
					uni.showToast({
						icon: "none",
						title: "请输入手机号",
						mask: true
					})
					return
				} else if (this.phone_code == '') {
					uni.showToast({
						icon: "none",
						title: "请输入手机验证码",
						mask: true
					})
					return
				} else if (!checkPhone(this.phone)) {
					uni.showToast({
						icon: "none",
						title: "请输入正确手机号码",
						mask: true
					})
					return
				}
			
				if (this.isStop) {
					this.isStop = false;
					let res = await this.$api.user_api.checksms({
						type:this.phone_code_type,
						code: this.phone_code, 
						openid:this.openId
					}) 
					uni.showLoading({
						mask: true,
						title: '绑定中...'
					}) 
					if (res.data.ret==0) {		 
						uni.hideLoading(); 
						uni.showToast({
							icon: "success",
							title: "绑定成功",
							mask: true,
							duration: 1000,
							async success() {
								
								let save_cookie = await _this.$api.user_api.saveCookie(); 
								_this.replace_phone = replaceStr(res.data.data.phone, 3, '****'); 								
								_this.$store.commit('UPDATE_LOGIN_STATUS',1);									
								uni.setStorage({
									key: 'userInfo',
									data: res.data.data
								})
								setTimeout(() => {
									if(_this.backType){
										uni.navigateBack({
											delta:2
										})
									}else{
										uni.switchTab({
											url: "/pages/index/index"
										})
									}
									
								}, 300)
								_this.isStop = true;
							}
						})
						
					} else {
						uni.hideLoading();
						uni.showToast({
							icon: "none",
							image: "../../static/images/error.png",
							title: res.data.message,
							mask: true
						})
						setTimeout(() => {
							_this.isStop = true;
						}, 300)
					}
			
				}
			
			
			}
		
		},
		
		// 解除绑定其他手机号
		upBindWechat:function(){
			let _this=this;
			uni.showModal({
				content:'解除绑定后相关微信功能将不能使用，确定解除绑定吗？',
				mask:true,
				async success(res) {
					if(res.confirm){
						let u_res=await _this.$api.user_api.updatePwd({
							wx_info:''
						})
						console.log(u_res)
						if(u_res.data.ret==0){
							let logout_res=await _this.$api.user_api.logout();
							if(logout_res.data.ret==0){
								uni.reLaunch({
									url:"/pages/login/login"
								})
								uni.clearStorage(); 
							}
						}
					}
				}
			})
		},
		 
		
		// 绑定微信手机号
		GetPhoneNumber:async function(e){ 
			console.log('获取',e)			
			let _this=this;  
			uni.request({
				url: HTTP_REQUEST_URL + '/user/wxphone',
				method: 'POST',
				data: {
					code:e.detail.code
				},
				dataType: 'json',
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
					"Cookie": []
				},
				success:async (b_res) => { 
					if (b_res.data.ret == 1) { 						 
						uni.hideLoading();  
						
						let res = await _this.$api.user_api.bindWxPhone({
							phone:b_res.data.data.phone,
							openid:_this.openId
						})  
						 
						if (res.data.ret==1) {		 
							uni.hideLoading(); 
							uni.showToast({
								icon: "success", 
								title: "绑定成功",
								mask: true,
								duration: 1000,
								async success() {
									let save_cookie = await _this.$api.user_api.saveCookie(); 
									res.data.data.uinfo.replace_phone = replaceStr(res.data.data.uinfo.phone, 3, '****'); 								
									_this.$store.commit('UPDATE_LOGIN_STATUS',1);									
									uni.setStorage({
										key: 'userInfo',
										data: res.data.data.uinfo
									})
									setTimeout(() => {
										if(_this.backType){
											uni.navigateBack({
												delta:2
											})
										}else{
											uni.switchTab({
												url: "/pages/index/index"
											})
										}
										
									}, 300)
									_this.isStop = true;
								}
							})
							 
						} else {
							uni.hideLoading();
							uni.showToast({
								icon: "none",
								image: "../../static/images/error.png",
								title: res.data.message,
								mask: true
							})
							setTimeout(() => {
								_this.isStop = true;
							}, 300)
						} 
					} 
				},
				fail: (err) => {
			
				}
			}) 
			
		},
		
		clearPhone:function(){
			this.phone='';
		}
		
	},
	onUnload() {
		if(this.timer){
			this.timer.stop()
		}
		
	},
	computed:{
		
	},
	components:{
		
	}
}
</script>

<style lang="less">
.page,page{background: #FFFFFF}

.account-phone{
	display: flex;
	font-size: 16px;
}

.form-wrap{
	width:80%;
	margin:0 auto;
}

.bind-icon-bar{
	display: flex;
	justify-content: center;
	padding:10% 0 40rpx;
	.icon{
		width:80rpx;
		height:80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0 20rpx;
	}
	.wx-icon image{
		width:100%;
	}
	.bind-icon image{
		width:70%
	}
	.login-icon image{
		width:100%
	}
}  

.phone-login{
	margin:100rpx 0 150rpx;
	.item{
		display: flex;
		border-bottom:2rpx solid #ddd;
		margin-bottom: 20rpx;
	}
} 
.phone-login .item .label,
.phone-login .item .get-code{
	width:80rpx;
	height:90rpx;
	text-align: center;
	line-height: 90rpx;
	color:#999;
	font-size:28rpx;
}
.phone-login .item .get-code{
	color:#09f;
}
.phone-login .item .phone-inp{
	flex-grow: 2;
	height:60rpx; 
	padding-left:20rpx;
	margin-top:15rpx; 
	font-size:28rpx;
}
.phone-login .item .get-code{
	width:250rpx;
}
.phone-login .item .get-code.active{
	color:#666;
}
.phone-login .item .code-inp{
	flex-grow: 2;
	height:60rpx;
	border-right:2rpx solid #ddd; 
	padding:0 0 0 20rpx; 
	margin-top:15rpx;
	max-width: 50%;
	font-size:28rpx;
}
.phone-login .item .iconfont{
	width: 80rpx;
	line-height: 90rpx;
	text-align: center;
	color:#ccc;
	font-size:40rpx;
}
.phone-login .login-btn{
	height:90rpx;
	text-align: center;
	line-height: 90rpx;
	margin-top:50rpx;
	background: #ccc;
	border-radius: 50rpx;
	font-size: 30rpx;
	color:#fff;
}
.phone-login .login-btn.active{
	background: #f00;
	color:#fff;
}
.hr-line{
	position:relative;
	text-align: center;
	margin-top:20rpx;
	font-size: 28rpx;
	color:#999;
}
.bind-wx-phone{
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	margin-top: 20rpx;
	background: #07c160;
	border-radius: 50rpx;
	font-size: 30rpx;
	color: #fff;
}
</style>
